<template>
	<div class="instrance">
		<x-header title="例子" :left-options="{backText: ''}">
		</x-header>
		<div class="content">
			<!-- 滑动删除 -->
			<swipeout class="vux-1px-tb">
				<swipeout-item transition-mode="follow" v-for="item in swipeoutData" :key="item.id">
					<div slot="right-menu">
						<swipeout-button type="primary" @click.native="del(item.id)">删除</swipeout-button>
						<swipeout-button type="warn">取消</swipeout-button>
					</div>
					<div slot="content" style="padding:12px;border-bottom:1px solid #D1D1D1;">{{ item.name }}</div>
				</swipeout-item>
			</swipeout>
			<p style="display:flex;padding:0 20px;">
				<span style="white-space:nowrap;">新闻</span>
				<marquee direction="down">
		          <marquee-item v-for="i in 10" :key="i">'JavaScript is the best language'{{i}}</marquee-item>
		        </marquee>						
			</p>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { getUrlParam } from '@/assets/js/getUrlParam'
	import { XHeader, Group, Cell, Swipeout, SwipeoutItem, SwipeoutButton, Clocker, Marquee, MarqueeItem } from 'vux';
	export default {
		name: 'instrance',
		data() {
			return {
				swipeoutData: [{
					id: 1,
					name: '很符合1'
				}, {
					id: 2,
					name: '很符合2'
				}, {
					id: 3,
					name: '很符合3'
				}],
			}
		},
		components: {
			XHeader,
			Group,
			Cell,
			Swipeout,
			SwipeoutItem,
			SwipeoutButton,
			Clocker,
			Marquee,
			MarqueeItem
		},
		computed: {

		},
		created() {

		},
		mounted() {

		},
		methods: {
			del(id){
				this.swipeoutData.forEach((i,v)=>{
					if(i.id===id){														
						this.$delete(this.swipeoutData,v);
						this.$vux.toast.show({
							position: 'middle',
							text: '删除成功',
							type: 'text',
							time: 3000
						});
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.instrance {
		min-height: 100%;
		background: #fff;
		padding-bottom: 2rem;
		.content {}
	}
	.vux-marquee{
		height: 32px!important;
	}
</style>